<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.department>>>.layui-table td,
.layui-table th {
    padding: 9px 2px;
    white-space: nowrap;
}

.layui-row {
    overflow: hidden;
}

.select-item {
    width: 100%;
    text-align: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-inline {
    padding: 5px 0;
}
</style>

<template>
<div class="organization">
    <div>
        <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加客户</a>
    </div>
    <form class="layui-form">
        <div class="layui-row">
            <div class="layui-col-lg4 select-item" style="text-align: right">

                <!--                <div class="layui-inline" style="width: 220px">-->
                <!--                    <select name="type"  id="type"  lay-filter="type"    class="layui-form-select">-->
                <!--                        <option value="">请选择客户类型</option>-->
                <!--                        <option v-for="(item, index) in typeEmnu" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>-->
                <!--                    </select>-->
                <!--                </div>-->
                <div class="layui-inline" style="width: 200px">
                    <select type="text" name="manager" id="manager" lay-verify="required" lay-search="" class="layui-select">
                        <option value="">请选择客户经理</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select type="text" name="type1" id="type1" lay-verify="required" lay-search="" class="layui-select">
                        <option value="">请选择客户类型</option>
                        <option value="1">电商客户</option>
                        <option value="2">普通订单</option>
                        <option value="3">海外客户</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" v-model="searchName" placeholder="名称/商务联系人/商务电话" class="layui-input key">
                </div>
                <button type="button" class="layui-btn sou" @click="search">搜索</button>
            </div>
        </div>

    </form>

    <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
        <table class="layui-table layui-form">

            <thead>
                <tr>
                    <th>客户名称</th>
                    <th>客户类型</th>
                    <th>商务联系人</th>
                    <th>电话</th>

                    <!--                <th :width="persionSize()">收货联系人</th>-->
                    <!--                <th :width="persionSize()">收货电话</th>-->
                    <th>财务联系人</th>
                    <th>电话</th>
                    <!--                <th :width="persionSize()">财务邮箱</th>-->
                    <!--                <th>注册资金</th>-->

                    <th>应收账款</th>
                    <th>预收账款</th>
                    <!--                <th>余额</th>-->

                    <!--                <th>客户类型</th>-->

                    <!--                <th width="150px">注册地址 </th>-->
                    <!--                <th width="250px">详细地址</th>-->
                    <!--                <th>备注</th>-->
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="id9" v-for="(val, index) in customers" :key="index">
                    <td>{{val.name}}</td>
                    <td>{{flagname(val.flag)}}</td>
                    <td>{{val.manager}}</td>
                    <td>{{val.managertel}}</td>

                    <!--                    <td>{{val.contact}}</td>-->
                    <!--                    <td>{{val.contactno}}</td>-->
                    <td>{{val.financer}}</td>
                    <td>{{val.fintel}}</td>
                    <!--                    <td>{{val.finemail}}</td>-->
                    <!--                    <td>{{val.registcapital}}</td>-->
                    <td>{{val.recbalance}}</td>
                    <td>{{val.prebalance}}</td>
                    <!--                    <td>{{val.prebalance}}</td>-->
                    <!--                    <td>{{val.typename}}</td>-->
                    <!--                    <td>{{val.province}}-{{val.city}}-{{val.district}}</td>-->
                    <!--                    <td>{{val.address}}</td>-->
                    <!--                    <td>{{val.remark}}</td>-->
                    <td>{{val.operator}}</td>
                    <td>{{val.createtime}}</td>

                    <td>
                        <a href="javascript:;" @click="edit(val.guid, 'recbalance')">预收款</a>
                        | <a href="javascript:;" @click="edit(val.guid)">修改</a>
                        | <a href="javascript:;" @click="del(val.guid)">删除</a>
                        | <a href="javascript:;" v-if="val.status!==2" @click="unable(val.guid)">禁用</a>
                        <a href="javascript:;" v-else @click="able(val.guid)">启用</a>
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
</div>
</template>

<script>
import Pagination from '../common/Pagination.vue'
export default {
    name: 'CustomerList',
    components: {
        Pagination
    },
    data() {
        return {
            datacategory: [],
            currentPage: 1,
            totalPage: 0,
            searchName: '',
            customers: [],
            typeEmnu: [],
            type: '1,2'
        }
    },
    updated: function () {
        layui.form.render('select');
        layui.form.render();
    },
    mounted() {
        let that = this;
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            that.getPageData();
            that.getDictEmnu();
            that.getData()
            form.on('select', function (data) {
                that[data.elem.name] = data.elem.value;
            })
        });

    },
    methods: {
        flagname: function(flag) {
            let name = '';
            switch (flag) {
                case 1:
                    name = '电商客户';
                    break;
                case 2:
                    name = '普通客户';
                    break;
                case 3:
                    name = '海外客户';
                    break;
            }
            return name;
        },
        getData() {
            let that = this
            $.ajax({
                url: '/sales/Customer!getCustmanagetrs.action',
                type: "post",
                dataType: "json",
                success: function (res) {
                    $.each(res.sellters, function (index, item) {
                        $('#manager').append("<option   value=" + item.sellPerName + " >" + item.sellPerName + "</option>");
                    });
                }
            })
        },
        unable(row) {
            let that = this
            let loader = layui.layer.load();
            let postData = {
                customerid: row
            }
            $.ajax({
                url: '/sales/Customer!unable.action',
                type: "post",
                dataType: "json",
                data: postData,
                success: function (res) {
                    if (res.msg == 'success') {
                        that.alert("禁用成功");
                        that.getPageData();
                    } else {
                        that.alert("禁用失败");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            })
        },
        able(row) {
            let that = this
            let loader = layui.layer.load();
            let postData = {
                customerid: row
            }
            $.ajax({
                url: '/sales/Customer!able.action',
                type: "post",
                dataType: "json",
                data: postData,
                success: function (res) {
                    if (res.msg == 'success') {
                        that.alert("启用成功");
                        that.getPageData();
                    } else {
                        that.alert("启用失败");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            })
        },
        search: function () {
            this.getPageData('search');
        },
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }
            let manager = $("#manager").val()
            postData.search = that.searchName;
            postData.types = that.type;
            postData.flag = $("#type1").val()
            postData.manager = manager
            postData.functiontype = 13;
            $.ajax({
                url: '/sales/Customer!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    if (res.flag == "success") {
                        //分页数据赋值
                        // that.currentPage = res.result.indexPage;
                        that.totalPage = res.result.pageCount;
                        that.customers = res.result.rows;
                    } else {
                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        add: function () {
            this.$parent.switchPage('CustomerAdd');
        },
        edit: function (id, type='') {
            this.$store.commit('setCustomerActype', type);
            this.$parent.gid = id;
            this.$parent.switchPage('CustomerEdit');
        },
        details: function (id) {
            this.$parent.gid = id;
            this.$parent.switchPage('CustomerDetails');
        },
        del: function (id) {
            let that = this;
            layer.confirm('确定要删除该数据？', function () {
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Customer!del.action',
                    type: "post",
                    data: {
                        customerid: id
                    },
                    dataType: "json",
                    success: function (res) {
                        if (res.msg == "success") {
                            that.toast("删除成功");
                            that.getPageData();
                        } else {
                            that.toast('存在销售信息,不可删除！');
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });

            })
        },
        /**
         * 2020-3-30
         * Liukx
         * 添加管理类型
         */
        getDictEmnu: function () {
            this.$post('/sales/Customer!getDictEmnu.action')
                .then(response => {
                    let data = response.data;
                    if (data.info != 'error') {
                        this.typeEmnu = data.info == null ? "" : data.info;
                    } else {
                        this.toast('获取管理类型失败！');
                    }
                })
        },
    }
}
</script>
